<template>
  <div class="login-container">

    <div v-if="!isLogin" class="login-false tvc" @click="login">
      登录
    </div>

    <div v-if="isLogin" class="login-true tvc">
      <!--   消息提示   -->
      <div>
        <Badge :count="msgCount" overflow-count="99" :offset="[20,6]">
          <svg class="icon" aria-hidden="true" style="width:30px;height:30px;margin-top:20px">
            <use xlink:href="#icon-tip"></use>
          </svg>
        </Badge>
      </div>


      <!--   头像   -->
      <div>
        <Dropdown trigger="click" placement="bottom-start">
          <Avatar icon="ios-person" :size="50" :src="userInfo.headPortraitUrl"/>

          <DropdownMenu slot="list">
            <DropdownItem>
              <div class="drop-item">
                <div class="icon">
                  <IconAli :sty="{width:'24px',height:'24px'}" icon='home'></IconAli>
                </div>
                <div class="text">
                  主 页
                </div>
              </div>
            </DropdownItem>

            <DropdownItem>
              <div class="drop-item">
                <div class="icon">
                  <IconAli :sty="{width:'24px',height:'24px'}" icon='set'></IconAli>
                </div>
                <div class="text">
                  设 置
                </div>
              </div>
            </DropdownItem>

            <DropdownItem divided>
              <div class="drop-item" @click="exit">
                <div class="icon">
                  <IconAli :sty="{width:'24px',height:'24px'}" icon='quit'></IconAli>
                </div>
                <div class="text">
                  退 出
                </div>
              </div>
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>

      </div>

    </div>

  </div>
</template>

<script>
import IconAli from "@/views/common/IconAli";
export default {
  //组件名称
  name: "Login",
  //组件注册
  components: {IconAli},
  //数据驱动
  data() {
    return {
      msgCount: 0,    //消息提示数字
    }
  },
  //计算属性
  computed: {
    isLogin() {
      return this.$store.getters.getIsLogin;
    },
    userInfo(){
      return this.$store.getters.getUserInfo;
    }
  },
  //数据监听
  watch: {},
  //方法
  methods: {
    login() {
      this.$router.push("/login")
    },
    exit(){
      window.localStorage.clear();  //清空 localStorage
      window.sessionStorage.clear(); //清空 sessionStorage
      this.$store.commit("setIsLogin",false)     //清空 vuex
    }
  },
  created() {
    this.bus.$on("my-event-msgCount", (n) => {
      this.msgCount += n;
    })
  },
  //钩子函数
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.login-container {
  .login-false {
    cursor: pointer;
    float: right;
    width: 100px;
    font-size: 18px;
    font-weight: lighter;
    line-height: 70px;
    text-align: center;
  }

  .login-false:hover {
    cursor: pointer;
    float: right;
    width: 100px;
    color: #F00;
    font-weight: bold;
    line-height: 70px;
    text-align: center;
  }

  .login-true {
    cursor: pointer;
    //float: right;
    width: 100%;
    line-height: 70px;
    display: flex;
    justify-content: space-around;
  }
}
</style>